<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>演示：jQuery后台页面左侧竖直二级导航栏</title>
        <link rel="stylesheet" href="../css/left-menu.css">
    </head>
    <body id="bg">
        <div class="container">
            <div class="menus_area" id="menus_area">
                <div class="line"></div>
                <dl class="system_log">
                    <dt>系统记录<img src="../img/left/select_xl01.png"></dt>
                    <dd class="first_dd"><a href="#">充值记录</a></dd>
                    <dd><a href="#">短信充值记录</a></dd>
                    <dd><a href="#">消费记录</a></dd>
                    <dd><a href="#">操作记录</a></dd>
                </dl>

                <dl class="custom">
                    <dt>客户管理<img src="../img/left/select_xl01.png"></dt>
                    <dd class="first_dd"><a href="#">客户管理</a></dd>
                    <dd><a href="#">试用/成交客户管理</a></dd>
                    <dd><a href="#">未成交客户管理</a></dd>
                    <dd><a href="#">即将到期客户管理</a></dd>
                </dl>

                <dl class="channel">
                    <dt>渠道管理<img src="../img/left/select_xl01.png"></dt>
                    <dd class="first_dd"><a href="#">渠道主页</a></dd>
                    <dd><a href="#">渠道标准管理</a></dd>
                    <dd><a href="#">系统通知</a></dd>
                    <dd><a href="#">渠道商管理</a></dd>
                    <dd><a href="#">渠道商链接</a></dd>
                </dl>

                <dl class="app">
                    <dt>APP管理<img src="../img/left/select_xl01.png"></dt>
                    <dd class="first_dd"><a href="#">App运营商管理</a></dd>
                    <dd><a href="#">开放接口管理</a></dd>
                    <dd><a href="#">接口类型管理</a></dd>
                </dl>

                <dl class="cloud">
                    <dt>大数据云平台<img src="../img/left/select_xl01.png"></dt>
                    <dd class="first_dd"><a href="#">平台运营商管理</a></dd>
                </dl>

                <dl class="syetem_management">
                    <dt>系统管理<img src="../img/left/select_xl01.png"></dt>
                    <dd class="first_dd"><a href="#">后台用户管理</a></dd>
                    <dd><a href="#">角色管理</a></dd>
                    <dd><a href="#">客户类型管理</a></dd>
                    <dd><a href="#">栏目管理</a></dd>
                    <dd><a href="#">微官网模板组管理</a></dd>
                    <dd><a href="#">商城模板管理</a></dd>
                    <dd><a href="#">微功能管理</a></dd>
                    <dd><a href="#">修改用户密码</a></dd>
                </dl>

                <dl class="source">
                    <dt>素材库管理<img src="../img/left/select_xl01.png"></dt>
                    <dd class="first_dd"><a href="#">图片库</a></dd>
                    <dd><a href="#">链接库</a></dd>
                    <dd><a href="#">推广管理</a></dd>
                </dl>

                <dl class="statistics">
                    <dt>统计分析<img src="../img/left/select_xl01.png"></dt>
                    <dd class="first_dd"><a href="#">客户统计</a></dd>
                </dl>
            </div>
        </div>

        <script src="../js/jquery.min.js"></script>
        <script type="text/javascript">

            $(function() {
                $("#menus_area").find("dt").click(function() { //一级菜单点击
                    if (!$(this).hasClass("on")) { //当前一级菜单不选中状态才切换
                        $("#menus_area").find("dt").removeClass("on");//所有的一级菜单去除选中样式
                        $(this).addClass("on");//当前一级菜单去除选中样式
                        $('dd').slideUp();//所有二级菜单隐藏
                        $(this).nextAll('dd').slideToggle();//当前所有二级菜单切换
                    }
                });
            })
        </script>
		<div style="text-align:center;">
<p><a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
    </body>

</html>